@charset "utf-8";
@import "reset";
@import "common";

.loginpart{
    header{
        z-index: -1;
    }
}
.login_h,.login_page {
    display: none;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: -1;
    width: 0%;
    white-space: nowrap;
}
.login_page {
    height: 100%;
}
.login_h {
    background-color: #1f1f1f;
    height: 0.9rem;
    span {
        font-size: 0.2689rem;
        color: white;
        vertical-align: middle;
    }
}


//登录页面 & 个人信息
//头部
.login_page {
    background-color: #1e1e1e;
}
.login_h {
    .search_box {
        margin: 0 0 0 0.1rem;
        vertical-align: top;
    }
}
.cancle {
    width: 0.5rem;
    height: 0.5rem;
    background-color: $uired;
    color: white;
    text-align: center;
    margin: 0.19rem 0.15rem 0 0.15rem;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
    i {
        line-height: 0.55rem;
        font-size: 0.35rem;
    }
    &:active {
        opacity: 0.8;
    }
}

//内容部分
.bg {
    background-color: #222222;;
}
//上面部分 
.login_page_h {
    width: 6.11rem;
    margin: 0 auto;
    border-top: 0.01rem solid #464646;
    min-height: 3.4rem;;
}

//登录以及已经登录的头部
.login_page_h {
    display: none;
    text-align: center;
            
    padding-top: 0.35rem;
    .picbox {
        position: relative;
        padding-bottom: 0.15rem;
        @extend %fs0;
        a {
            position: relative;
            width: 1.3rem;
            height:1.3rem;
            border-radius: 50%;
            overflow: hidden;
//          margin: 0 auto;
            margin: 0 auto;
            &:active{
                background: none;
            }
        }
        img {
            @include m();
            width: 100%;
        }
        i {
            display: inline-block;
            width: 0.33rem;
            height: 0.33rem;
            line-height: 0.33rem;
            border-radius: 50%;
            background-color: #ff0000;
            font-size: 0.2069rem;
            vertical-align: top;
            position: absolute;
            top: 0;
            transform: translateX(0.35rem);
        }
    }
    span,i {
        color: white;
    }
    .name {
        font-size: 0.2486rem;
        span {
//          vertical-align: middle;
        }
        a {
            display: inline-block;
            padding: 0 0.1rem;
            border: 0.01rem solid white;
            font-size: 0.122rem;
            vertical-align: 0.01rem;
            &:active span{
                color: $uired;
            }
        }
    }
    .stars {
        height: 0.2rem;
        text-align: center;
        font-size: 0;
        margin: 0.1rem 0;
        img {
            height: 100%;
        }
    }
    .cared_fans {
        font-size: 0.2308rem;
        a {
            display: inline;
            color: $uired;
        }
    }
    .btnsbox {
        @extend %fs0;
        a {
            display: inline-block;
            width: 2.2rem;
            height: 0.5rem;
            line-height: 0.5rem;
            border-radius:0.25rem ;
            background-color: #cdcdcd;
            font-size: 0.2308rem;
            margin: 0.2rem 0.1rem;
            &:active {
                opacity: 0.8;
            }
        }
        .red {
            background-color: #b60005;
        }
    }
}
.online {
//  display: block;
}
//登录界面
.not_login {
    display: block;
//  display: none;
    @extend %fs0;
    .login {
        margin-bottom: 0.05rem;
        a {
            font-size: 0.2486rem;
            display: inline;
            &:active span{
                color: $uired;
            }
        }
    }
    .fget {
        display: inline;
        font-size: 0.15rem;
        text-decoration: underline;
        color:#464646 ;
        &:active{
            color: $uired;
        }
    }
}

//登录页面下的资讯分类
.captions {
    display: none;
    width: 5.76rem;
    margin: 0 auto;
}
.caption_h {
    height: 0.68rem;
    font-size: 0.2308rem;
    color: #656565;
    border-bottom:  0.01rem solid #2a2a2a;
    line-height: 0.68rem;
    position: relative;
    span {
        
    }
    i {
        //届时直接操作translaterY数值即可
        position: absolute;
        top: 0.2rem;
        right: 0.08rem;
        display: inline-block;
        height: 1em;
        line-height: 1;
        overflow: hidden;
        font-size: 0.25rem;
//      &::after {
//          display: inline-table;
//          white-space: pre;
//          content: "\e643\A\e642";
////          transform: translateY(-1em);
//          transform: translateY(0);
//      }
    }
}
.caption_c {
    margin-top: -0.01rem ;
    text-align: center;
    a {
        height: 0.86rem;
        width: 4.3rem;
        margin: 0 auto;
        line-height: 0.86rem;
        border-top:0.01rem solid #2a2a2a;
        font-size: 0.2131rem;
        color: white;
        &:active {
            background-color: #656565;
        }
    }
}
.leave {
    @extend %fs0;
    text-align: center;
    padding: 0.25rem 0 0.38rem;
    button {
        background-color: $uired;
        height: 0.52rem;
        width: 1.8rem;
        border-radius: 0.26rem;
        font-size: 0.2308rem;
        color: white;
        line-height: 0.52rem;
        &:active {
            opacity: 0.8;
        }
    }
}